<template>
    <Image :src="sources" :style="styleComputed">
        <template v-slot:loading>
            <Loading type="spinner" size="20" />
        </template>
    </Image>
</template>

<script setup>
import { Image, Loading } from 'vant';
import { computed, onMounted, ref } from 'vue';

import { isImageFile, isTextFile, isVideoFile } from '@/utils/default-util';

import IconOther from './icons/file_icon_other.png';
import IconText from './icons/file_icon_text.png';

const props = defineProps({
    filename: String,
    style: Object
})

const sources = ref(IconOther)

const initIcon = async () => {
    if (!props.filename) {
        sources.value = IconOther
    } else if (isImageFile(props.filename)) {
        sources.value = `/api/get-image-thumbnail?filename=${props.filename}`
    } else if (isVideoFile(props.filename)) {
        sources.value = `/api/get-video-cover?filename=${props.filename}`
    } else if (isTextFile(props.filename)) {
        sources.value = IconText
    } else {
        sources.value = IconOther
    }
}

onMounted(() => {
    initIcon()
})

const styleComputed = computed(() => {
    if (!props.style) {
        return {}
    } else {
        return props.style
    }
})

</script>

<style lang="scss" scoped></style>